import React, { Component } from "react";
import { NavBar, Icon } from 'antd-mobile';
import { Flex } from 'antd-mobile';
import { Grid } from 'antd-mobile';
import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
import "./MyAsset.css"

const genre = ['收益明细', '交易记录']
const icon = [require('../../imgs/detail.png'), require('../../imgs/record.png')]
const routes = ['#/terran/mySimulationDetail','#/terran/mySimulationRecord']

const data = Array.from(new Array(2)).map((_val, i) => ({
    icon: icon[i],
    text: genre[i],
    route: routes[i],
}));

export default class MyAsset extends Component {
    constructor(props){
        super(props);
    }

    render() {
        return (
            <div className="myAsset-div">
                <div>
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.location.href = '#/terran/myAfterLogin'}
                        rightContent={[
                            <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                            <Icon key="1" type="ellipsis" />,
                        ]}
                        style={{position:"relative"}}
                    >我的模拟</NavBar>
                </div>

                <div className="flex-container" style={{height:'34vh'}}>
                    <Flex>
                        <Flex.Item><div style={{ textAlign: 'center', color: '#999999', fontSize: '18px' }}>总金额（元）</div></Flex.Item>
                    </Flex>
                    <Flex>
                        <Flex.Item><div style={{ textAlign: 'center', fontSize: '42px' }}>360.28</div></Flex.Item>
                    </Flex>
                    <WhiteSpace size="lg" />
                    <Flex>
                        <Flex.Item><div style={{ textAlign: 'center', color: '#999999', fontSize: '18px' }}>昨日收益</div></Flex.Item>
                        <Flex.Item><div style={{ textAlign: 'center', color: '#999999', fontSize: '18px' }}>持有收益</div></Flex.Item>
                        <Flex.Item><div style={{ textAlign: 'center', color: '#999999', fontSize: '18px' }}>累计收益</div></Flex.Item>
                    </Flex>
                    <Flex>
                        <Flex.Item><div style={{ textAlign: 'center', fontSize: '20px' }}>+8.13</div></Flex.Item>
                        <Flex.Item><div style={{ textAlign: 'center', fontSize: '20px' }}>+10.28</div></Flex.Item>
                        <Flex.Item><div style={{ textAlign: 'center', fontSize: '20px' }}>+25.98</div></Flex.Item>
                    </Flex>
                </div>

                <WingBlank size="lg">
                    <Grid data={data} columnNum={2} onClick={_el => console.log(_el)} itemStyle={{ height: '60px' }}
                        renderItem={dataItem => (
                            <div onClick={() => {window.location.href = dataItem.route}}>
                                <img src={dataItem.icon} style={{ width: '24px', height: '24px', float: 'left' }} alt="" />
                                <div style={{ fontSize: '18px' }}>
                                    <span>{dataItem.text}</span>
                                </div>
                            </div>
                        )} />
                </WingBlank>

                <WingBlank size="lg" style={{height:'10vh',marginTop:'1vh'}}>
                    <Card>
                        <Card.Header
                            title="华宝创新优选混合"
                            thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                            thumbStyle={{ height: '20px' }}
                        />
                        <Card.Body style={{padding:'0px'}}>
                            <div className="flex-container" style={{margin:'0px',height:'8vh'}}>
                                <Flex>
                                    <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>金额</div></Flex.Item>
                                    <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>昨日收益</div></Flex.Item>
                                    <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>持有收益</div></Flex.Item>
                                </Flex>
                                <Flex>
                                    <Flex.Item><div style={{ textAlign: 'center' }}>209.59</div></Flex.Item>
                                    <Flex.Item><div style={{ textAlign: 'center', color: 'red' }}>+8.14</div></Flex.Item>
                                    <Flex.Item><div style={{ textAlign: 'center', color: 'red' }}>+9.59</div></Flex.Item>
                                </Flex>
                            </div>
                        </Card.Body>
                    </Card>
                </WingBlank>
                <br />
                <br />
                <WingBlank size="lg" style={{height:'10vh',marginTop:'1vh'}}>
                    <Card>
                        <Card.Header
                            title="华宝创新优选混合"
                            thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                            thumbStyle={{ height: '20px' }}
                        />
                        <Card.Body style={{padding:'0px'}}>
                            <div className="flex-container" style={{margin:'0px',height:'8vh'}}>
                                <Flex>
                                    <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>金额</div></Flex.Item>
                                    <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>昨日收益</div></Flex.Item>
                                    <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>持有收益</div></Flex.Item>
                                </Flex>
                                <Flex>
                                    <Flex.Item><div style={{ textAlign: 'center' }}>209.59</div></Flex.Item>
                                    <Flex.Item><div style={{ textAlign: 'center', color: 'red' }}>+8.14</div></Flex.Item>
                                    <Flex.Item><div style={{ textAlign: 'center', color: 'red' }}>+9.59</div></Flex.Item>
                                </Flex>
                            </div>
                        </Card.Body>
                    </Card>
                </WingBlank>
                <br />
                <br />
                <WingBlank size="lg" style={{height:'10vh',marginTop:'1vh'}}>
                    <Card>
                        <Card.Header
                            title="华宝创新优选混合"
                            thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                            thumbStyle={{ height: '20px' }}
                        />
                        <Card.Body style={{padding:'0px'}}>
                            <div className="flex-container" style={{margin:'0px',height:'8vh'}}>
                                <Flex>
                                    <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>金额</div></Flex.Item>
                                    <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>昨日收益</div></Flex.Item>
                                    <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>持有收益</div></Flex.Item>
                                </Flex>
                                <Flex>
                                    <Flex.Item><div style={{ textAlign: 'center' }}>209.59</div></Flex.Item>
                                    <Flex.Item><div style={{ textAlign: 'center', color: 'red' }}>+8.14</div></Flex.Item>
                                    <Flex.Item><div style={{ textAlign: 'center', color: 'red' }}>+9.59</div></Flex.Item>
                                </Flex>
                            </div>
                        </Card.Body>
                    </Card>
                </WingBlank>
                <br />
                <br />
                <WingBlank size="lg" style={{height:'10vh',marginTop:'1vh'}}>
                    <Card>
                        <Card.Header
                            title="华宝创新优选混合"
                            thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                            thumbStyle={{ height: '20px' }}
                        />
                        <Card.Body style={{padding:'0px'}}>
                            <div className="flex-container" style={{margin:'0px',height:'8vh'}}>
                                <Flex>
                                    <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>金额</div></Flex.Item>
                                    <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>昨日收益</div></Flex.Item>
                                    <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>持有收益</div></Flex.Item>
                                </Flex>
                                <Flex>
                                    <Flex.Item><div style={{ textAlign: 'center' }}>209.59</div></Flex.Item>
                                    <Flex.Item><div style={{ textAlign: 'center', color: 'red' }}>+8.14</div></Flex.Item>
                                    <Flex.Item><div style={{ textAlign: 'center', color: 'red' }}>+9.59</div></Flex.Item>
                                </Flex>
                            </div>
                        </Card.Body>
                    </Card>
                </WingBlank>
                <br />
                <br />
            </div>
        );
    }
}